<template>
    <div class="market">
        <h2>卧龙市场</h2>
        <div class="content">
            <div class="item" v-for="value in arr">
                <img width="230px" :src="value.img" alt="" >
                <p>{{ value.content }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref,} from 'vue';
import img1 from '../assets/img/3.png';
import img2 from '../assets/img/4.png';
import img3 from '../assets/img/5.png';
import img4 from '../assets/img/6.png';
const arr=ref([{
       img:img1,
       content:"交通轨道；由于主要采用电气牵引。而且轮轨摩擦阻力较小，与公共.......我我我我我哇哇哇哇牛牛牛牛牛牛"
    },{
       img:img2,
       content:"节能环保：由于不断上涨的能源消耗和我们的专业知识，维护可持续.....我我我我我哇哇哇哇牛牛牛牛牛牛"
    },{
       img:img3,
       content:"航空与船舰：如果你是在公海行驶，你需要确保你的船只的电力系统......我我我我我哇哇哇哇牛牛牛牛牛牛"
    },{
       img:img4,
       content:"石油、天然气及采矿：在市场中的安全性，可靠性，效密和最短的停机.........我我我我我哇哇哇哇牛牛牛牛牛牛"
    }
])

</script>

<style lang="less" scoped>
.market{
    padding: 15px;
    //怪异盒模型,设置padding、border不计算到宽高之中
    box-sizing: border-box;
    .content{
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        //justify-content: center;居中
        //justify-content: space-around;等比例分配剩余空间,不需要设置padding和margin
        //justify-content: flex-start;往左
        //justify-content: flex-end;往右
        .item{
            p{
                width: 230px;
                display: -webkit-box;//设置盒模型为box
                -webkit-box-orient: vertical;//设置方向为垂直方向
                overflow: hidden;//溢出隐藏
                -webkit-line-clamp: 2;//超过两行添加省略号
            }
        }

   }
}

</style>